body {
   height: 100vh;
   display: flex;
   flex-direction: column;
   overflow: hidden;
}
.dis {
   display: block !important;
}
.flex {
   display: flex !important;
}
.fixed {
   overflow-y: scroll;
   z-index: 20;
   position: fixed;
   display: flex;
   align-items: center;
   flex-direction: column;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.2);
   .z {
      flex: 1;
   }
   & > div {
      flex-shrink: 0;
      border-radius: 6px;
      margin: auto;
   }
   .c {
      border-radius: 4px;
      box-sizing: border-box;
      padding: 2px;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      color: #ccc;
      cursor: pointer;
      &:hover {
         background-color: rgba(0, 0, 0, 0.05);
      }
   }
   .box {
      background: #fff;
      width: 600px;
      height: 400px;
      min-height: 400px;
      padding: 0 26px;
      box-sizing: border-box;
      color: #303133;
      display: flex;
      flex-direction: column;
      form {
         text-align: center;
      }
      input[type="text"] {
         height: 32px;
         line-height: 32px;
         font-size: 18px;
         border: #ccc 1px solid;
         border-radius: 4px;
         padding: 0 8px;
         color: inherit;
      }
      input[type="text"]:focus {
         border-color: #0c93e4 !important;
      }
      input.error {
         border-color: #fc1944 !important;
      }
      .top {
         display: flex;
         padding-top: 26px;
         height: 36px;
         border-bottom: #e4e7ed 2px solid;
         .g {
            flex: 1;
         }
         li {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 36PX;
         }
         .list-button {
            height: 36px;
            cursor: pointer;
            padding: 0 18px;
         }
         .active {
            color: #fc5531;
            border-bottom: #fc5531 2px solid;
         }
      }
      .bom {
         display: flex;
         flex: 1;
         align-items: center;
         justify-content: center;
         flex-direction: column;
         li {
            display: none;
            div {
               margin-bottom: 20px;
               text-align: center;
            }
         }
         button:hover {
            background-color: #fc1944 !important;
         }
         button {
            height: 32px;
            line-height: 32px;
            border-radius: 16px;
            box-sizing: border-box;
            background: #fc5531;
            position: relative;
            padding: 0 22px;
            color: #fff;
            margin-left: 6px;
         }
      }
      &.upimg {
         font-size: 14px;
         ul {
            display: flex;
         }
         .up {
            .updata {
               form {
                  text-align: center;
               }
               .file_s {
                  height: 36px;
                  line-height: 36px;
                  position: relative;
                  border-radius: 18px;
                  input {
                     width: 100%;
                     height: 100%;
                     opacity: 0;
                     position: absolute;
                     top: 0;
                     left: 0;
                  }
               }
            }
            .uplink {
               color: rgba(0, 0, 0, 0.75);
               input {
                  width: 280px;
               }
            }
         }
      }
      &.addlink {
         input {
            width: 300px;
         }
      }
   }
   .push_article {
      width: 660px;
      background-color: #fff;
      color: #3c3c3c;
      padding: 24px;
      line-height: 24px;
      h4 {
         margin: 0;
         .c {
            float: right;
         }
      }
      ul {
         li {
            margin-top: 16px;
            display: flex;
            flex-shrink: 0;
            .title {
               flex-shrink: 0;
            }
            .main {
               flex: 1;
            }
            .cover {
               flex: 1;
               .cover-btn {
                  margin-bottom: 12px;
                  label {
                     margin-right: 24px;
                  }
               }
               .cover-list {
                  padding: 0 6px;
                  display: flex;
                  flex-wrap: wrap;
                  .fmimage_box {
                     display: none;
                     box-sizing: border-box;
                     width: 160px;
                     height: 90px;
                     cursor: pointer;
                     border: 1px dashed #bfbfbf;
                     border-radius: 4px;
                     margin-right: 22px;
                     position: relative;
                     background-size: 100%;
                     background-repeat: no-repeat;
                     background-position: center center;
                     margin-bottom: 26px;
                     img {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        width: 20px;
                        height: 20px;
                     }
                     &.file {
                        img {
                           display: none;
                        }
                     }
                     input {
                        width: 100%;
                        height: 100%;
                        opacity: 0;
                        display: block;
                     }
                     &:hover {
                        background-color: #f5f6f7;
                     }
                  }
                  .textarea {
                     width: 524px;
                     height: 90px;
                     box-sizing: border-box;
                     padding: 8px;
                     font-size: 14px;
                     line-height: 24px;
                     border: 1px solid #dcdfe6;
                     border-radius: 4px;
                     margin-right: 26px;
                     margin-bottom: 26px;
                     textarea {
                        width: 100%;
                        height: 100%;
                        resize: none;
                     }
                     &:focus {
                        border-color: #0c93e4 !important;
                     }
                  }
                  &.fmx1 {
                     .fmimage_box:nth-child(1) {
                        display: block;
                     }
                     .textarea {
                        width: 342px;
                     }
                  }
                  &.fmx2 {
                     .fmimage_box:nth-child(1),
                     .fmimage_box:nth-child(2),
                     .fmimage_box:nth-child(3) {
                        display: block;
                     }
                  }
               }
            }
            .add-box {
               display: flex;
               flex-wrap: wrap;
               .tag {
                  display: flex;
                  align-items: center;
                  background-color: rgba(38, 125, 204, 0.05);
                  border-radius: 4px;
                  border: 1px solid rgba(38, 125, 204, 0.2);
                  height: 26px;
                  line-height: 26px;
                  padding: 0 8px;
                  margin: 0 6px;
                  margin-bottom: 6px;
                  .text {
                     display: block;
                     font-size: 14px;
                     margin-right: 8px;
                     color: #267dcc;
                  }
                  .del {
                     display: block;
                     width: 16px;
                     height: 16px;
                     fill: #267dcc;
                     border-radius: 8px;
                     cursor: pointer;
                     &:hover {
                        background-color: #267dcc;
                        fill: #fff;
                     }
                     svg {
                        width: 100%;
                        height: 100%;
                        display: block;
                     }
                  }
               }
               .add {
                  display: flex;
                  align-items: center;
                  background-color: rgba(38, 125, 204, 0.05);
                  border-radius: 4px;
                  border: 1px solid #e8e8ee;
                  height: 26px;
                  line-height: 26px;
                  padding: 0 8px;
                  margin: 0 6px;
                  cursor: pointer;
                  fill: #333333;
                  svg {
                     width: 16px;
                     height: 16px;
                  }
                  input {
                     margin-left: 3px;
                     width: 100px;
                     background-color: transparent;
                  }
                  &:hover {
                     fill: #267dcc;
                     border-color: rgba(38, 125, 204, 0.2);
                  }
               }
            }
            .class-list-box {
               width: 100%;
               height: 160px;
               margin-top: 8px;
               border-radius: 4px;
               border: 1px solid #e8e8ee;
               padding: 0 16px;
               box-sizing: border-box;
               color: #555666;
               font-size: 14px;
               .title {
                  line-height: 36px;
               }
               .br {
                  width: 100%;
                  height: 1px;
                  margin: 0 auto;
                  background-color: #e8e8ee;
                  margin-bottom: 3px;
               }
               .class-r {
                  user-select: none;
                  display: flex;
                  flex-wrap: wrap;
                  label {
                     display: flex;
                     align-items: center;
                     line-height: 22px;
                     margin: 3px 6px;
                  }
               }
            }
            .type {
               label {
                  margin-right: 24px;
               }
            }
            .button {
               display: flex;
               justify-content: flex-end;
               button {
                  height: 32px;
                  box-sizing: border-box;
                  border-radius: 16px;
                  padding: 0 16px;
                  color: #555666;
                  border: 1px solid #e8e8ed;
                  background-color: transparent;
                  font-size: 14px;
                  margin: 0 8px;
                  &:hover {
                     border: 1px solid #555666;
                     color: #555666;
                     background-color: transparent;
                  }
               }
               .c {
                  width: auto;
               }
               #push_send {
                  background: #fc5531;
                  font-family: PingFangSC-Medium, PingFang SC;
                  font-weight: 500;
                  color: #fff;
                  &:hover {
                     background: #fc1944;
                     border-color: #fc1944;
                     color: #fff;
                  }
               }
            }
         }
      }
   }
}
header {
   height: 56px;
   display: flex;
   align-items: center;
   background-color: #f4f4f4;
   padding: 0 26px;
   box-sizing: border-box;
   .return {
      height: 17px;
   }
   .title {
      transition: 0.3s ease-in;
      position: relative;
      flex: 1;
      height: 36px;
      border-radius: 18px;
      border: 1px solid #ccc;
      overflow: hidden;
      margin-left: 8px;
      input {
         width: 100%;
         height: 100%;
         padding-left: 20px;
         padding-right: 90px;
         box-sizing: border-box;
         font-size: 18px;
      }
      .title-l {
         font-size: 20px;
         position: absolute;
         display: flex;
         align-items: center;
         top: 0;
         right: 0;
         padding-right: 8px;
         height: 100%;
         background-color: #fff;
      }
   }
   .preservation,
   .release {
      height: 36px;
      padding: 0 16px;
      line-height: 34px;
      border-radius: 18px;
      box-sizing: border-box;
      margin-left: 20px;
      border: #fc5531 1px solid;
      cursor: pointer;
      user-select: none;
   }
   .preservation {
      background-color: #fff;
      color: #fc5531;
   }
   .release {
      background-color: #fc5531;
      color: #fff;
   }
   .profile {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      overflow: hidden;
      margin-left: 20px;
      margin-right: 10px;
      img {
         width: 100%;
         height: 100%;
      }
   }
}
.menu {
   background-color: #fff;
   .edit-Buttons {
      display: flex;
      .button-box {
         height: 54px;
         box-sizing: border-box;
         padding: 6px;
         flex-shrink: 0;
         .button {
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            background-color: #00000000;
            padding: 0 8px;
            cursor: pointer;
            svg {
               width: 16px;
               height: 16px;
               margin-bottom: 4px;
            }
         }
         .button:hover {
            background-color: #f0f0f5;
         }
         [type="file"] {
            display: none;
            width: 0;
            height: 0;
         }
      }
      .line {
         width: 1px;
         background-color: #e0e0e0;
         height: 17px;
         margin: 18px 10px;
      }
   }
}
.fbm {
   flex: 1;
   position: relative;
   & > .button-bar {
      display: none;
   }
}
.toastui-editor-toolbar {
   display: none;
}
.ProseMirror,
.toastui-editor-contents {
   font-size: 16px;
}
.toastui-editor-main .toastui-editor-md-vertical-style .toastui-editor {
   width: 0;
   flex: 1;
   background-color: #f5f5f5;
}
.toastui-editor-defaultUI {
   box-sizing: border-box;
   .ProseMirror {
      padding: 18px;
   }
}
.toastui-editor-md-container .toastui-editor-md-preview {
   padding: 0 18px;
   width: 49%;
   table {
      width: 100%;
   }
   .toastui-editor-contents {
      margin: 0 auto;
      max-width: 1020px;
   }
}
.toastui-editor-main .toastui-editor-md-vertical-style .toastui-editor-md-splitter {
   width: 26px;
   position: inherit;
   background-color: #fff;
   .button-bar {
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: space-between;
      .button-bar__inner {
         button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            background-color: #00000000;
            margin: 3px 0;
            &:hover {
               background-color: rgba(0, 0, 0, 0.05);
            }
         }
      }
   }
}
.edit {
   width: 110px;
   height: 110px;
   position: absolute;
   top: 0;
   right: 0;
   z-index: 20;
   div {
      width: 36px;
      height: 36px;
      position: absolute;
      top: 16px;
      right: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      svg {
         fill: rgba(0, 0, 0, 0.25);
         width: 16;
         height: 16px;
      }
   }
   &::after {
      content: "";
      position: absolute;
      right: 0;
      border-top: 110px solid rgba(0, 0, 0, 0.075);
      border-left: 110px solid transparent;
      pointer-events: none;
   }
}
footer {
   height: 20px;
   background-color: #6b6b6b;
   display: flex;
   padding: 0 6px;
   font-size: 12px;
   line-height: 20px;
   color: #fff;
   & > span {
      margin: 0 5px;
   }
   .g {
      flex: 1;
   }
   .d {
      font-weight: bold;
   }
}
input[type="radio"] {
   appearance: none;
   width: 14px;
   height: 14px;
   background: transparent;
   border: 1px solid #dcdfe6;
   border-radius: 50%;
   position: relative;
   transition: 0.3s;
   &::after {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      border-radius: 50%;
      transition: 0.3s;
      width: 0;
      height: 0;
   }
   &:checked {
      border-color: #409eff;
      background-color: #409eff;
      &::after {
         width: 5px;
         height: 5px;
      }
      & + span {
         color: #409eff;
      }
   }
}
::-webkit-scrollbar,
::-webkit-scrollbar-track {
   width: 8px;
   height: 8px;
   background-color: transparent;
   cursor: default;
}
::-webkit-scrollbar-thumb {
   border-radius: 4px;
   background-color: #999;
}
::-webkit-scrollbar,
::-webkit-scrollbar-track {
   background-color: transparent;
}
